<template>
  <div class="comment">
<!--    评论人信息-->
    <div class="commentAuthor">
      <router-link tag="img" :src="comment.avatar" alt="" :to="{path:'/author_detail',query:{userId:comment.userId}}" />
      <span>{{comment.userName}}</span>
<!--      评论者或者发帖者 删除按钮-->
      <span @click="del(comment.commentId)" v-show="$store.state.userInfo.userId==comment.userId || myNode.some(items=>comment.postsId==items.postsId)" class="del"><van-icon name="close" /></span>
    </div>
<!--    评论的内容-->
    <div>
      <span class="comments">{{comment.commentContent}}</span><br>
      <span style="font-size: 10px;float: right">{{comment.createdTime}}</span>
      <div style="clear: both"></div>
    </div>
<!--回复 弹框-->
    <van-overlay :show="show">
      <div class="wrapper" >
        <div class="block" >
          <!--    评论发表-->
          <div class="toComment">
            <van-field
                v-model="message"
                rows="2"
                autosize
                label="回复:"
                type="textarea"
                autofocus
                maxlength="50"
                placeholder="请输入回复内容"
                show-word-limit
            />
            <van-button style="float: right" type="primary" size="mini" @click="publish"> 发表言论 </van-button>
            <div style="clear:both;"></div>
          </div>
        </div>
      </div>
    </van-overlay>
<!--回复按钮-->
    <div class="commentReplay">
      <span  @click="toComment">回复<van-icon name="chat-o" /></span>
      <div style="clear: both"></div>
    </div>

<!--    评论的-评论-->
    <div v-if="!(commentsComment=='')" class="commentsComment" @click="commentsNum">
      <span class="commentNum">{{commentsComment.length}}条回复--->>></span>
      <div v-for="(item,index) in commentsComment" :key="item.commentId">
        <div v-if="index < commentShowNum">
          <p>{{item.userName}}：<span style="color: gray">{{item.commentContent}}</span></p>
          <span style="float: right;font-size: 8px">{{item.createdTime}}</span>
          <div style="clear: both"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Dialog, Toast} from "vant";
import {commentAnswer,delComment, getMyJoin, gitAnswerList} from "@/api/api";
//, userInfo
export default {
  name: "Comment",
  props:['comment'],
  data(){
    return {
      commentsComment:{},
      myNode:[],
      commentShowNum:0,
      show:false,
      message:'',
    }
  },
  methods:{
    //评论删除
    del(commentId){
      Dialog.confirm({
        title: '是否删除该评论？',
      })
          .then(() => {
            //确定后删除
            delComment(commentId).then(res=>{
              if(res.code=='0'){
                window.history.go(0)
              }
            })
          })
          .catch(() => {
            // on cancel
          });
    },
    //回复弹框
    toComment(){
      if(this.$store.state.isLogin==true){
        this.show=true
      }else{
        //没有登陆时
        Dialog.confirm({
          title: '没有登陆！不能进行评论哦！',
          confirmButtonText:'去登陆',
          cancelButtonText:'我再看看',
        })
            .then(() => {
              // 确定   返回登录页
              this.$router.push('/login')
            })
            .catch(() => {
              // on cancel
            });
      }
    },
    //改变评论的评论显示条数
    commentsNum(){
      if(this.commentShowNum==0){
        this.commentShowNum=this.commentsComment.length
      }else{
        this.commentShowNum=0
      }
    },
    //回复
    publish(){
        if(!this.message==""){
          commentAnswer(this.comment.postsId,this.comment.commentId,this.message).then(res=>{
            // console.log(res)
            if(res.code=='0'){
              this.message='';
              //关闭遮罩层
              this.show=false;
              gitAnswerList(this.comment.commentId).then(res=>this.commentsComment=res.rows)
            }else{
              //关闭遮罩层
              this.show=false;
              Toast.fail('数据错误，请重新输入！');
            }
          })
        }else{
          this.show=false;
          Toast.fail('请输入要评论的文字');
        }

    }
  },
  created() {
    //  评论的评论  this.comment.commentId
    gitAnswerList(this.comment.commentId).then(res=>{
      this.commentsComment=res.rows
    })
    //判断是否登录
    if(this.$store.state.isLogin==true){
      // 获取我的帖子
      getMyJoin().then(res=>{
        res.rows.forEach(item=>{
          if(item.userId==this.$store.state.userInfo.userId){
            this.myNode.push(item)
          }
        })
      })
    }

  }
}
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 90%;
  height: 150px;
  background-color: #fff;
}
//  评论
.comment {
  p {
    margin: 0;
  }
  background-color: #f6f6f6;
  border-radius: 5px;
  margin: 0 20px 10px;
  padding: 5px;
  box-shadow: -0.5px 0.5px 2px #c9c9c9;
  position: relative;
  //评论者信息、删除
  .commentAuthor {
    display: flex;
    align-items: center;
    margin: 5px 0;
    //评论者头像
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      box-shadow: 0 0 5px #375700;
    }
    //评论者名字
    span {
      margin-left: 20px;
      font-size: 12px;
      color: gray;
    }
  }
  //评论内容
  .comments {
    margin-left: 30px;
    font-size: 14px;
  }
  //评论的评论
  .commentsComment {
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background-color: white;
    .commentNum {
      font-size: 12px;
      margin-left: 10px;
      font-family: 仿宋;
    }
    div {
      font-size: 12px;
      margin: 5px 10px;
      font-family: 楷体;
    }
  }
  //删除按钮
  .del {
    position: absolute;
    right: 10px;
    font-size: 18px;
  }
  //回复按钮
  .commentReplay {
    margin: 10px 0;
    span {
      float: right;
      display: inline-block;
      padding: 2px 5px;
      border: 1px solid #d5d5d5;
      border-radius: 5px;
      font-size: 10px;
      i {
        margin-left: 3px;
      }
    }
  }
}
//评论框
.toComment {
  border: 1px solid #cbd5d5;
  border-radius: 5px;
  font-size: 14px;
  margin: 10px;
  padding: 5px;
  /deep/.van-field__label {
    width: 33px;
    display: flex;
    align-items: center;
    background-color: #eeeeee;
    border-radius: 5px;
  }
}
</style>